<!--这个是搜索组件!-->
<template>
  <div>
    <el-autocomplete v-model="state"
                     :fetch-suggestions="querySearchAsync"
                     placeholder="请输入内容"
                     @select="handleSelect"
                     style="margin-top: 10px;
                     margin-right: 20px"
                     type="text"
                     @keyup.enter="">
    </el-autocomplete>
  </div>
</template>


<script>
export default {
  data() {
    return {
      restaurants: [],
      state: '',
      timeout:  null
    };
  },
  methods: {
    loadAll() {
      return [
        { "value": "斗罗大陆" },
        { "value": "斗破苍穹" },
      ];
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
};
</script>

